<!DOCTYPE html>
<html>

<head>
    {include file="public/meta" /}
    <link rel="stylesheet" href="__ADDON__/css/index.css?v={$Think.config.site.version}" />
    <link rel="stylesheet" href="__ADDON__/css/mobiscroll.core-2.5.2.css?v={$Think.config.site.version}" />
    <link rel="stylesheet" href="__ADDON__/css/mobiscroll.animation-2.5.2.css?v={$Think.config.site.version}" />
    <link rel="stylesheet" href="__ADDON__/css/mobiscroll.android-ics-2.5.2.css?v={$Think.config.site.version}" />
</head>

<body>
    <div id="app" v-cloak>
        <mt-header title="会议室"></mt-header>
        <div class="address">
            <p><span v-if="edifice" v-html="edifice.name"></span><i class="iconfont" @click="toggleEdifice">&#xe662;</i>
            </p>
            <div class="addressList" v-show="addressPopup">
                <p v-for="(v,i) in edifices" v-html="v.name" @click="setEdifice(v)"></p>
            </div>
        </div>

        <div class="date">
            <div class="month">
                <input type="text" required="" name="VisitTime" id="appDateTime1" class="select_w" readonly="">
                <div class="text" v-html="month"></div>
                <div class="icon"><i class="iconfont">&#xe698;</i></div>
                <!--<div @click="selectMonth()" class="text" v-html="month+'月'"></div>-->
                <!--<div @click="selectMonth()" class="icon"><i class="iconfont">&#xe698;</i></div>-->
            </div>
            <div class="days">
                <a v-if="edifice" v-for="(v,i) in edifice.date" @click="setDay(v.day,v.week)">
                    <div @click="setDay(v.day,v.week)" class="day"><span v-html="v.day"
                            :class="{active:v.day==day}"></span></div>
                    <div @click="setDay(v.day,v.week)" class="week"><span v-html="v.weekName"></span></div>
                </a>
            </div>
        </div>
        <div class="room">
            <div v-for="(v,i) in room" @click="jump(v.id)" class="roomList">
                <div style="overflow: hidden;">
                    <div class="thumb">
                        <img :src="v.thumb" />
                    </div>
                    <div class="content">
                        <p class="title" v-html="v.title"></p>
                        <span class="examine" v-if="v.is_verify"><i></i>需审核</span>
                        <div class="badge">
                            <span class="badgeLabel">{{v.people}}人</span>
                            <span class="badgeLabel magrinLeft" v-for="(val,index) in v.facilities">{{val.name}}</span>
                            <!--<mt-badge size="small">{{v.people}}人</mt-badge>
                        <mt-badge size="small" v-for="(val,index) in v.facilities">{{val.name}}</mt-badge>-->
                        </div>
                    </div>
                </div>
                <div class="times">
                    <div class="timesList" v-for="(val,index) in v.times">
                        <span class="timesNum" v-html="index"></span>
                        <span :class="{state:true}">
                            <i class="progressBar" v-bind:style="{height:val+'%'}"></i>
                        </span>
                    </div>

                </div>
            </div>
        </div>
        <div class="tabbar">
            <mt-tabbar fixed="true">
                <a class="mint-tab-item is-selected" href="javascript:;">
                    <div class="mint-tab-item-icon"><i class="iconfont">&#xe650;</i></div>
                    <div class="mint-tab-item-label">
                        会议室
                    </div>
                </a>
                <a class="mint-tab-item" href="{:addon_url('mrbs/meeting')}">
                    <div class="mint-tab-item-icon"><i class="iconfont">&#xe606;</i></div>
                    <div class="mint-tab-item-label">
                        会议管理
                    </div>
                </a>
            </mt-tabbar>
        </div>
        <!--日期选择-->
        <template>
            <mt-datetime-picker ref="picker" type="date" @confirm="selectDate" :start-date="new Date">

            </mt-datetime-picker>
        </template>
    </div>
    <script src="__ADDON__/js/jquery-1.11.1.min.js?v={$Think.config.site.version}"></script>
    <script src="__ADDON__/js/mobiscroll.core-2.5.2.js?v={$Think.config.site.version}"></script>
    <script src="__ADDON__/js/mobiscroll.core-2.5.2-zh.js?v={$Think.config.site.version}"></script>
    <script src="__ADDON__/js/mobiscroll.datetime-2.5.1.js?v={$Think.config.site.version}"></script>
    <script src="__ADDON__/js/mobiscroll.datetime-2.5.1-zh.js?v={$Think.config.site.version}"></script>
    <script src="__ADDON__/js/mobiscroll.android-ics-2.5.2.js?v={$Think.config.site.version}"></script>
    {include file="public/script" /}
    <script src="__ADDON__/js/index.js?v={$Think.config.site.version}"></script>
</body>

</html>